<template>
  <div class="u-p-20">
    <el-tabs v-model="activeTab" type="card" class="u-mt-20">
      <el-card shadow="never">
        <div slot="header">
          <span>
            <b class="u-f-16">退款订单列表</b>
          </span>
        </div>

        <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
          <el-form-item label="订单状态">
            <el-select v-model="queryForm.status" clearable @change="handleChange">
              <el-option label="全部" value></el-option>
              <el-option label="待付款" value="1"></el-option>
              <el-option label="已付款" value="2"></el-option>
              <el-option label="已发货" value="3"></el-option>
              <el-option label="已收货" value="4"></el-option>
              <el-option label="已完成" value="5"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="退款处理状态">
            <el-select v-model="queryForm.out_handle_status" clearable @change="handleChange">
              <el-option label="全部" value></el-option>
              <el-option label="待处理" value="1"></el-option>
              <el-option label="已拒绝" value="2"></el-option>
              <el-option label="已同意" value="3"></el-option>
              <el-option label="返还货物" value="4"></el-option>
              <el-option label="已完成" value="5"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="订单编号">
            <el-input v-model="queryForm.keyword" placeholder="订单编号" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="tableData" class="u-mt-10" v-viewer>
          <el-table-column label="id" prop="id" width="60"></el-table-column>
          <el-table-column label="用户信息" width="120">
            <template slot-scope="scope">
              <div class="head-img">
                <el-image class="el-img" :src="scope.row.head_img" fit="cover" lazy></el-image>
              </div>
              <div class="nick_name">{{scope.row.nick_name}}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.order_status==0" type="info">已取消</el-tag>
              <el-tag v-if="scope.row.order_status==1" type="info">待付款</el-tag>
              <el-tag v-if="scope.row.order_status==2" type="success">已付款</el-tag>
              <el-tag v-if="scope.row.order_status==3">已发货</el-tag>
              <el-tag v-if="scope.row.order_status==4" type="warning">已收货</el-tag>
              <el-tag v-if="scope.row.order_status==5" type="danger">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="群主所属" width="110">
            <template slot-scope="scope">
              <el-tag type="info">{{scope.row.agency_title==''?"无":scope.row.agency_title}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="基本信息" width="280">
            <template slot-scope="scope">
              <p>订单编号：{{scope.row.order_sn}}</p>
              <p>支付单号：{{scope.row.pay_sn}}</p>
              <p>下单时间：{{scope.row.create_date}}</p>
            </template>
          </el-table-column>
          <el-table-column label="商品详情" width="280">
            <template slot-scope="scope">
              <div
                v-for="(goods_item,index) in scope.row.order_detail"
                class="goods_title_p"
                :class="index%2==0?'info':'text'"
                :key="goods_item.id"
              >
                <span class="goods_title">{{goods_item.goods_title}}</span>
                <span
                  style="color: red;"
                  v-if="goods_item.out_handle_status>0"
                >{{goods_item.goods_number}}(件)</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单详情" width="280">
            <template slot-scope="scope">
              <div class="order-price info">
                <div class="label">实际收款总额：</div>
                <div class="price" style="color:#F56C6C">￥{{scope.row.actual_price}}</div>
              </div>
              <div class="order-price text">
                <div class="label">商品订单总额：</div>
                <div class="price" style="color:#E6A23C">￥{{scope.row.order_total}}</div>
              </div>
              <div class="order-price info">
                <div class="label">代理应支付总额：</div>
                <div class="price">￥{{scope.row.agency_price}}</div>
              </div>
              <div class="order-price text">
                <div class="label">实际成本价：</div>
                <div class="price">￥{{scope.row.cost_price}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="处理状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.out_status==1" type="danger">待处理</el-tag>
              <el-tag v-if="scope.row.out_status==2" type="info">已拒绝</el-tag>
              <el-tag v-if="scope.row.out_status==3" type="success">已同意</el-tag>
              <el-tag v-if="scope.row.out_status==4" type="success">返还货物</el-tag>
              <el-tag v-if="scope.row.out_status==5" type="success">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="退款金额" prop="item_order_total"></el-table-column>
          <el-table-column label="添加日期" prop="create_date" sortable></el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="small"
                @click.native="handleRoute(scope.row.id,'orderOutEdit')"
                v-if="hasPerm('orderOutEdit')"
              >退款处理</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="u-mt-20 u-text-center">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </el-tabs>
  </div>
</template>

<script>
import commonPage from "@/mixins/common-page";
export default {
  mixins: [commonPage],
  data() {
    return {
      apiName: "order",
      apiPage: "outPage",
      queryForm: {
        status: "",
        out_handle_status: "", //处理状态
        keyword: "",
      },
      activeTab: "orderout",
    };
  },
  methods: {
    handleChange() {
      this.getPageData(true);
    },
    handleDelete(id) {
      this.$confirm("确认删除该数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api[this.apiName].outDel(id).then((response) => {
            if (response.code == 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.onLoad();
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.head-img {
  width: 100%;
  text-align: center;
}
.head-img .el-img {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}
.nick_name {
  width: 100%;
  text-align: center;
}
.order {
  margin-top: 10px;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;

  .order-head {
    background: #f7f7f7;
    line-height: 35px;
    .order-sn {
      margin-left: 15px;
    }
  }

  .order_main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-overflow: ellipsis;
    align-content: center;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
  }
}
.goods_title_p {
  display: flex;
  line-height: 30px;
  .goods_title {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
    display: block;
  }
}
.el-button {
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 0;
}
.text {
  color: #409eff;
  background: #ecf5ff;
}
.info {
  color: #67c23a;
  background: #f0f9eb;
}
.order-price {
  .label {
    display: inline-block;
    width: 115px;
  }
  .price {
    display: inline-block;
    width: 100px;
    color: #999;
  }
}
</style>